<template>
<div class="main">
<el-table-header class="table-header">
  <el-button @click="refresh"><i class="el-icon-refresh el-icon--left"></i>刷新</el-button>
  <el-button @click="handleDialog()"><i class="el-icon-plus el-icon--left"></i>新增</el-button>
</el-table-header>
  <el-table
    :data="data.data"
    max-height="850"
    style="width: 100%;margin-bottom: 20px;"
    row-key="AdminMenuId"
    lazy
    empty-text="暂无数据"
    :load="load"
    :tree-props="{children: 'ChildRen', hasChildren: 'hasChildren'}">
    <el-table-column
      :prop="item.DataIndex"
      :label="item.Title"
      sortable
      v-for="item in data.columns" :key="item.DataIndex">
      <template #default="scope" v-if="item.DataIndex == 'IsHidden'">
        <el-tag
          :type="scope.row.IsHidden ? 'success' : 'info'"
          disable-transitions>{{scope.row.IsHidden ? '显示':'隐藏'}}</el-tag>
      </template>

      <template #default="scope" v-if="item.DataIndex == 'Operation'">
        <el-button
          size="mini"
          @click="handleDialog(scope.row,'edit')"><i class=" el-icon-edit el-icon-left"></i> 编辑</el-button>
        <br />
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.row)"><i class="el-icon-delete"></i> 删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <BasicDialog
    v-model:visible="dialog.visible"
    v-if="dialog.visible"
    :formData="dialog"
    :formTitle="dialog.title"
    :data="ItemsData.data"
    @confirm="confirm"
  />
</div>
</template>
<script>
import { getCurrentInstance, reactive } from 'vue';
import BasicDialog from '@/components/basic/basic-dialog'
export default {
  name:"SystemMenu",
  components:{
    BasicDialog
  },
  setup(){
    let { ctx } = getCurrentInstance();
    // 编辑框参数
    let ItemsData = reactive({});
    // 弹窗信息
    let dialog = reactive({
      visible:false,
      forms:[],
      title:""
    })
    // 页面数据
    let data = reactive({
      data: [],
      columns: [],
      forms: [],
    });
    // 刷新页面
    function refresh(){
      getMenu()
    }
    async function getMenu() {

      // const loading = ctx.$loading({
      //     lock: true,
      //     text: 'Loading',
      //     spinner: 'el-icon-loading',
      //     background: 'rgba(0, 0, 0, 0.7)'
      // });
      let MenuList = await ctx.$store.dispatch('GET_MENU', true);
      let MenuConfig = await ctx.$fetch.get('/Menu/MenuConfig', {});
      data.data = MenuList;
      data.columns = MenuConfig.Data.Column
      data.forms = dialog.forms = MenuConfig.Data.Forms
      // loading.close();
    }

    // 编辑新增弹窗
    function handleDialog(row,type = ""){
      if(type === 'edit')
      {
        dialog.title = "菜单编辑"
        ItemsData.data = JSON.parse(JSON.stringify(row))
      }else
      {
        ItemsData.data = {}
        for (let index = 0; index < data.forms.length; index++) {
          // 新增方法去除主键(有主键会变成更新操作)
          if(data.forms[index].Type !== 'primary_key')
          {
            ItemsData.data[data.forms[index].Key]  = ""
          }
          // const element = array[index];
        }
        ItemsData.data.Select = []
      }
      dialog.visible = true
    }

    // 删除按钮
    function handleDelete(row){
        ctx.$confirm('将删除『'+ row.Name +'』菜单, 是否继续?', '删除菜单', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          ctx.$fetch.post('/Menu/Delete',row)
          .then(
              (response) => {
                ctx.$message.success(response.Msg)
                setTimeout(() => {
                  getMenu()
                }, 1000);
              },
            (err) => {
                ctx.$message.error(err.Msg)
            })
            }).catch(() => {
              ctx.$message({
                type: 'info',
                message: '已取消删除'
              });
        });
    }

    // 提交
    function confirm(){
      let ParentId = ItemsData.data.ParentId
      if(Array.isArray(ParentId))
      {
        // 获取数组最后一个值
        ItemsData.data.ParentId = ParentId.pop()
      }
      ctx.$fetch.post('/Menu/Save',ItemsData.data)
      .then(
        (response) => {
          ctx.$message.success(response.Msg)
            setTimeout(() => {
              getMenu()
          }, 1000);
        },
        (err) => {
            ctx.$message.error(err.Msg)
        }
      )
    }
    getMenu();

    return {
      getMenu,
      data,
      ItemsData,
      dialog,
      handleDialog,
      refresh,
      confirm,
      handleDelete
    }
  }
}
</script>
<style scoped>
.main{
  padding: 20px;
}
.table-header{
  /* background: #ffffff; */
  width: 100%;
  display: block;
  /* padding: 10px; */
  text-align: left;
  margin-bottom: 4px;
}
.el-button{
  margin-top: 5px;
}
</style>
